<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关键字</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/marked_css.css" />
		<link rel="stylesheet" href="../../css/element_UI.css">
		<link rel="stylesheet" href="../../css/guanJianZi/index.css">
		<script src="../../javaScript/vue.js"></script>
		<script src="../../javaScript/jquery-3.4.1.js"></script>
		<script src="../../javaScript/marked.min.js"></script>
		<script src="../../javaScript/element_UI.js"></script>
		<script src="../../javaScript/clipboard.min.js"></script>
		<script src="../../javaScript/cp.js"></script>
	</head>

	<body>
		<div id="app">
			<!-- markedDown -->
			<div class="marked-box">
				<el-row>
					<el-col :span="24">
						<div v-html="md" class="marked-content-box"></div>
					</el-col>
					<el-col :span="24">
						<!-- <span>
							<i class="el-icon-connection"></i> 按类型分类 - 关键字详细说明：
							<el-button type="primary" @click="to_page(0)">框架辅助关键字方法 (auxiliary)</el-button>
							<el-button type="primary" @click="to_page(1)">框架原生关键字方法 (page_Action)</el-button>
							<el-button type="primary" @click="to_page(2)">框架自定义插件方法 (plugins)</el-button>
						</span> -->
						<span>
							<p> <i class="el-icon-connection"></i> <strong>框架辅助关键字方法 (auxiliary):</strong></p>
							<p>此类方法仅允许在脚本中调用，在用例中使用框架将无法识别；主要应用在“自定义插件方法”的开发中，起辅助作用。</p>
							<el-button type="primary" @click="to_page(0)">框架辅助关键字方法 (auxiliary)</el-button>
						</span>
						<el-divider></el-divider>
					</el-col>
					<el-col :span="24">
						<span>
							<p> <i class="el-icon-connection"></i> <strong>框架原生关键字方法 (page_Action):</strong></p>
							<p>在 “用例文件” 和 “脚本”中均可使用。</p>
							<el-button type="primary" @click="to_page(1)">框架原生关键字方法 (page_Action)</el-button>
						</span>
						<el-divider></el-divider>
					</el-col>
					<el-col :span="24">
						<span>
							<p> <i class="el-icon-connection"></i> <strong>框架自定义插件方法 (plugins):</strong></p>
							<p>此类方法需要使用者根据实际的被测系统自行开发，框架中不提供。</p>
							<el-button type="primary" @click="to_page(2)">框架自定义插件方法 (plugins)</el-button>
						</span>
					</el-col>
				</el-row>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						md: null,
						to_path_data: [
							"./auxiliary.html",
							"./page_action.html",
							"./plugins.html"
						]
					}
				},
				// 生命周期钩子-挂载后执行
				mounted() {
					var that = this;
					that.this_ajax("../../md/page_action/概要介绍.md")
				},
				methods:{
					// 跳转点击
					to_page(key) {
						var that = this;
						console.log(key);
						window.location.href = that.to_path_data[key]
					},
					this_ajax(src) {
						var that = this;
						$(function(){
							$.ajax({
								type:"get",
								url:src,
								dataType:"html",
								async: false,
								success:function(res){
									that.md = marked.parse(res);
									$(function(){
										var copy_text_array = [];
										var pres = $("pre");
										if (pres.length) {
											pres.each(function() {
												var that = this;
												var copy_text = $(that).find("code").text();
												copy_text_array.push(copy_text)
											})
										}
										prettyPrint();
										$.fn.copy_init(copy_text_array);
									})
								}
							})
						});
					}
				}
			})
		</script>
	</body>

</html>